{extend name="common/base" /}

{block name="style"}
<link rel="stylesheet" href="__CDN__/html/css/LArea.css">
<link rel="stylesheet" href="__CDN__/html/css/mui.picker.min.css">
<link rel="stylesheet" href="__CDN__/html/css/mui.poppicker.css">
<style>
    .jsinput{
        color:#333333;
        font-size:0.15rem;
        text-align:right;
        border:0;
    }
</style>
{/block}
{block name="body"}
<div class="sqhz-mians">
    <form method="post" id="apply-form" enctype="multipart/form-data" action=""> 
        <div class="sqhz-top">
            <div class="sqhz-top-one"><span>投放地址</span></div>
            <ul class="sqhz-nav">
                <li>
                    <span>学校</span>
                    <span class="span2"><input class="jsinput" name="city" id="city" readonly="readonly" placeholder="请选择所在学校"></span>
                </li>
                <li>
                    <span>校区</span>
                    <span class="span2">
                        <input class="jsinput" id="js-xq" readonly="readonly" placeholder="请选择所在校区">
                        <input type="hidden" name="xq-id" class="js-xq-id" value="">
                    </span>
                </li>
                <li>
                    <span>宿舍楼</span>
                    <span class="span2"> 
                        <input class="jsinput" id="js-dy" readonly="readonly" placeholder="请选择所在宿舍楼">
                        <input type="hidden" name="dy-id" class="js-dy-id" value="">
                    </span>
                </li>
                <li>
                    <span>宿舍号</span>
                    <span class="span2">
                        <input class="jsinput" id="js-fj" readonly="readonly" placeholder="请选择所在宿舍号">
                        <input type="hidden" name="fj-id" class="js-fj-id" value="">
                    </span>
                </li>   
                <li style="height:auto;line-height:0.2rem;background:none;padding:0.15rem;color:#999999;">
                    <span style="">●  如果地址栏中没有您的地址，请在微信公众号中发送您的地址和联系信息，工作人员会及时与您联系</span>
                </li>
            </ul>
        </div>
        <div class="sqhz-fx"></div>
        <div class="sqhz-top">
            <div class="sqhz-top-one"><span>联系信息</span></div>
            <ul class="sqhz-nav sqhz-nav2">
                <li>
                    <span>联系人</span>
                    <span class="span2"></span>
                    <input type="text" name="contacts" class="sqhz-inp js-contacts" placeholder="请填写联系人">   
                </li>
                <li class="mui-radio" style="overflow:hidden;">
                    <span style="float:left;">性别</span>
                    <div style="float:right;">
                        <label style="display:inline;padding-right:0;margin-bottom:0.05rem;">男</label>
                        <input style="position:static;" name="sex" value="1" class="js-sex" type="radio">
                        <label style="display:inline;padding-right:0;margin-bottom:0.05rem;">女</label>
                        <input style="position:static;" name="sex" value="0" class="js-sex" type="radio">
                    </div>


                </li> 
                <li>
                    <span>联系电话</span>
                    <span class="span2"></span>
                    <input type="text" name="telephone" class="sqhz-inp js-telephone" placeholder="请输入联系电话"> 
                </li>          
            </ul>
            <div class="ly-wk">
                <div class="ly-wz">留言</div>
                <textarea style="padding:0.1rem;" placeholder="有啥想和我们说的，请您留言哟~" name="remark" class="ly-text js-remark"></textarea>
                <div class="ly-bout" style="margin-bottom:0.1rem;" id="save">提交申请</div>
            </div>
        </div>    
    </form>    
</div>

<!-- 弹框 -->
<div class="sqhz-tank" style="display: none;"></div>
<div class="sqhz-tk-pos js-zengjia" style="display: none;">
    <p class="tk-pos-ps">该房间已经申请过盒子，若您需要增加盒子，请联系平台</p>
    <ul class="pos-nav">
        <li class="li js-ok">知道了</li>
        <a href="tel://{$tel}" ><li>联系平台</li></a>
    </ul>
</div>
<!-- 222 -->
<div class="sqhz-tk-pos js-hei" style="display: none;">
    <p class="tk-pos-ps">该房间已被列入黑名单，无法申请盒子，若有需要，请联系平台处理。</p>
    <ul class="pos-nav">
        <li class="li js-ok">知道了</li>
        <a href="tel://{$tel}" ><li>联系平台</li></a>
    </ul>
</div> 
{/block}
{block name="script"}

<script src="__CDN__/html/js/mui.picker.min.js"></script>
<script src="__CDN__/html/js/mui.poppicker.js"></script>
<script src="__CDN__/html/js/LAreaData1.js"></script>
<script src="__CDN__/html/js/LAreaData2.js"></script>
<script src="__CDN__/html/js/LArea.js"></script>
<script src="__CDN__/html/js/base.js"></script>
<script>
    document.querySelector("[name='sex']").checked = "true";
    var area1 = new LArea();
    area1.init({
        'trigger': '#city', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
        'valueTo': '#value1', //选择完毕后id属性输出到该位置
        'keys': {
            id: 'id',
            name: 'name'
        }, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
        'type': 1, //数据源类型
        'data': LAreaData //数据源
    });

    $('#js-xq').on('click', function () {
        var city = $('#city').val();

        if (city == '') {
            mui.alert('请先选择城市');
            return
        } else {
            $.post("{:url('Pub/getXq')}", {city: city}, function (res) {
                if (res.code == '1') {
                    var xqPicker = new mui.PopPicker();
                    xqPicker.setData(res.data);
                    xqPicker.show(function (items) {
                        $('#js-xq').val(items[0].text);
                        $('.js-xq-id').val(items[0].value);

                    });
                } else {
                    mui.toast('该城市没有找到服务小区');
                }
            }, 'json');
        }
    });

    $('#js-dy').on('click', function () {
        var id = $('.js-xq-id').val();

        if (id == '') {
            mui.alert('请先选择小区');
            return
        } else {
            $.post("{:url('Pub/getHouse')}", {id: id}, function (res) {
                if (res.code == '1') {
                    var dyPicker = new mui.PopPicker();
                    dyPicker.setData(res.data);
                    dyPicker.show(function (items) {
                        $('#js-dy').val(items[0].text);
                        $('.js-dy-id').val(items[0].value);

                    });
                } else {
                    mui.toast('该小区没有服务单元');
                }
            }, 'json');
        }
    });

    $('#js-fj').on('click', function () {
        var id = $('.js-dy-id').val();

        if (id == '') {
            mui.alert('请先选择单元');
            return
        } else {
            $.post("{:url('Pub/getHouse')}", {id: id}, function (res) {
                if (res.code == '1') {
                    var fjPicker = new mui.PopPicker();
                    fjPicker.setData(res.data);
                    fjPicker.show(function (items) {
                        $('#js-fj').val(items[0].text);
                        $('.js-fj-id').val(items[0].value);

                    });
                } else {
                    mui.toast('该单元没有服务房间');
                }
            }, 'json');
        }
    });

    $('#save').on('click', function () {
        var flag = 1;
        var err = '';
        var sex = document.querySelector('[name="sex"]:checked').value;

        if (!$("#city").val()) {
            err = '请选择学校';
            flag = 0;
        }
        if (!$(".js-xq-id").val()) {
            err = '请选择校区';
            flag = 0;
        }
        if (!$(".js-dy-id").val()) {
            err = '请选择宿舍楼';
            flag = 0;
        }
        if (!$(".js-fj-id").val()) {
            err = '请选择宿舍号';
            flag = 0;
        }

        if (!$(".js-contacts").val()) {
            err = '请填写联系人信息';
            flag = 0;
        }
        if (sex != 0 && sex != 1) {
            err = '请选择性别';
            flag = 0;
        }
        if (!$(".js-telephone").val()) {
            err = '请填写手机号';
            flag = 0;
        }

        if ($(".js-telephone").val()) {
            if (!is_mobile($(".js-telephone").val())) {
                err = '请填写正确的手机号';
                flag = 0;
            }
        }





        if (flag) {
            var room_id = $('.js-fj-id').val();
            $.post("{:url('isApply')}", {room_id: room_id}, function (res) {
                if (res.code == 70) {
                    $('.sqhz-tank').show();
                    $('.js-zengjia').show();
                    return;
                } else if (res.code == 80) {
                    $('.sqhz-tank').show();
                    $('.js-hei').show();
                    return;

                } else {
                    $("#apply-form").submit();
                }
            }, 'json');

        } else {
            mui.alert(err);
        }
    });

    $('.sqhz-tank').on('click', function () {
        hideAll();
    });

    $('.js-ok').on('click', function () {
        hideAll();
    });

    function hideAll() {
        $('.sqhz-tank').hide();
        $('.sqhz-tk-pos').hide();
        $('.js-hei').hide();
    }

</script>
{/block}